<template>
  <view>
    <van-dropdown-menu>
      <van-dropdown-item @change="changeState" :value="newsPram.cur_day" :options="option2" />
      <van-dropdown-item @change="changeId" :value="newsPram.company_id" :options="companyList" />
    </van-dropdown-menu>
    <view class="active_box" :key="item.id" v-for="item in activeList" @click="goVaPreview(item)">
      <view class="active_date">{{ item.activity_time | displayDate }}</view>
      <viwe class="title_img_box">
        <view class="active_img_box">
          <image class="img" :lazy-load="true" mode="aspectFill" :src="`${baseUrl}/images/news/${item.cover_img}`">
          </image>
          <!-- <view class="active_com">{{
            item.company_name ? item.company_name : '锦龙汽车集团'
          }}</view> -->
          <view class="active_com" v-if="item.brand_id == 1">锦龙汽车集团</view>
          <view class="active_com" v-else>{{ item.company_name ? item.company_name : '奥迪体验中心' }}</view>
        </view>
        <view class="active_title">{{ item.title }}</view>
      </viwe>
    </view>
  </view>
</template>

<script>
let flag = true
import { mapState } from 'vuex'
import { newsListApi } from '@/API/reqNews'
export default {
  data() {
    return {
      // 服务中心数据
      temCenters: [],
      // 基础路径
      baseUrl: this.$baseUrl,
      // 新闻与活动请求参数
      newsPram: {
        type: 2,
        brand_id: [1],
        state: 1,
        page: 1,
        pageSize: 10,
        company_id: '',
        cur_day: true,
      },
      // 活动列表
      activeList: [],
      option1: [
        // { text: '新闻', value: 1 },
        { text: '活动', value: 2 },
      ],
      option2: [
        { text: '当前活动', value: true },
        { text: '往期活动', value: false },
      ],
      total: 0,
    }
  },
  onLoad(option) {
    let { brand_id } = this.brandInfo
    this.newsPram.brand_id.push(brand_id)
    // 混合分享信息
    this.shareMixin.title = `活动列表`
    this.shareMixin.path = `/News/ActiveList`
    // 获取活动列表
    this.getNewsList()
  },
  methods: {
    // 跳转外链
    goVaPreview(e) {
      if (e.wx_link === '') {
        uni.navigateTo({
          url: `/News/NewsDetails?item=${e.id}`,
        })
      } else {
        // let info = { src: e.wx_link, title: '活动详情' }
        wx.navigateTo({ url: `/pages/goVaPage?info=${e.wx_link}` })
        // wx.navigateTo({
        //   url: `/pages/goVaPage?info=${encodeURIComponent(
        //     JSON.stringify(info)
        //   )}`,
        // })
      }
    },
    // 活动列表
    async getNewsList(cb) {
      const {
        data: { data, total },
      } = await newsListApi(this.newsPram)
      this.activeList = [...this.activeList, ...data]
      this.total = total
      cb && cb()
    },
    // 下拉事件
    onPullDownRefresh() {
      flag = true
      this.activeList = []
      // 故障列表
      this.newsPram.page = 1
      this.getNewsList(uni.stopPullDownRefresh)
    },
    // 触底事件
    onReachBottom() {
      if (this.activeList.length < this.total) {
        this.newsPram.page++
        // 列表
        this.getNewsList()
      } else {
        if (!flag) return false
        uni.$showMsg('没有更多数据了!')
        flag = false
      }
    },
    changeState(e) {
      this.newsPram.cur_day = e.detail
      flag = true
      this.activeList = []
      // 获取活动列表
      this.getNewsList()
    },
    changeId(e) {
      // console.log('e.detail', e.detail)
      let { brand_id } = this.brandInfo
      flag = true
      if (e.detail === -1) {
        this.newsPram.brand_id = [1]
        this.newsPram.company_id = ''
      } else if (e.detail === '') {
        this.newsPram.brand_id = [1, brand_id]
        this.newsPram.company_id = ''
      } else {
        this.newsPram.brand_id = [brand_id]
        this.newsPram.company_id = e.detail
      }
      this.activeList = []
      // 获取活动列表
      this.getNewsList()
    },
  },
  computed: {
    ...mapState(['centers', 'brandInfo',]),
    companyList() {
      let temp = this.centers.map(item => ({
        text: item.text,
        value: item.id
      }))
      return [{ text: "全部", value: "" },
      { text: "锦龙汽车集团", value: -1 },
      ...temp]
    }
  },
}
</script>

<style scoped lang="scss">
@import '@/styles/mixins.scss';

uni-popup {
  padding: 20rpx;
}

.centers_item {
  text-align: center;
  font-size: 26rpx;
  line-height: 68rpx;
  border-bottom: 1px solid #eee;
}

.active_box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20rpx 0rpx 10rpx 0rpx;
  width: 100%;
  text-align: center;
  line-height: 36px;
  font-size: 26rpx;
  color: #999;
}

.title_img_box {
  width: 90%;
  box-shadow: $theme-shadow;
  background-color: #fff;
  border-radius: 8rpx;

  .active_img_box {
    position: relative;
    border-radius: 8rpx;
    height: 360rpx;
    overflow: hidden;

    .img {
      border-radius: 8rpx;
    }

    .active_com {
      font-size: 24rpx;
      position: absolute;
      background-color: rgba(0, 0, 0, 1);
      padding: 0 20rpx;
      color: #fff;
      bottom: 30rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      // width: 156rpx;
      border-top-right-radius: 30rpx;
      border-bottom-right-radius: 30rpx;
      left: 0rpx;
    }
  }

  .active_title {
    text-align: left;
    font-size: 30rpx;
    font-weight: 600;
    padding: 10rpx;
    @include text-ellipsis();
  }
}
</style>
